import React, { useEffect, useState, useCallback } from 'react';
import { Button, Modal, Drawer, Table, Switch, Popconfirm, message } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import UserSelector from './UserSelector';
import AddUserDrawer from './AddUserDrawer';
import style from '@/pages/IndexPage.css';

function UserTableContainer({ depList, currentDep, roleList, onDispatch, userList, currentPage, total }){
    const [info, setInfo] = useState({});
    const columns = [
        { title:'序号', render:(text, record, index)=>{ return (currentPage - 1) * 12 + index + 1 }},
        { title:'用户名', dataIndex:'userName'},
        { title:'真实姓名', dataIndex:'name'},
        { title:'电话', dataIndex:'phone' },
        { title:'web端权限', dataIndex:'webRole', render:value=><Switch size='small' checked={value ? true : false} /> },
        { title:'移动端权限', dataIndex:'mobileRole', render:value=><Switch size='small' checked={value ? true : false} /> },
        { title:'是否启用', dataIndex:'isActive', render:value=><Switch size='small' checked={value ? true : false} /> },
        { title:'添加时间', dataIndex:'createTime'},
        {
            title: '操作',
            render: row => (
                <div>
                    <Button type='link' icon={<EditOutlined />} onClick={()=>setInfo({ visible:true, forEdit:true, current:row })}>操作</Button>
                    <Popconfirm cancelText='取消' okText='确定' title={`确认删除${row.roleName}`} onConfirm={()=>{
                        new Promise((resolve, reject)=>{
                            onDispatch({ type:'permission/delRoleAsync', payload:{ resolve, reject, roleId:row.roleId }})
                        })
                        .then(()=>{
                            message.success(`删除${row.roleName}成功`);
                        })
                        .catch(msg=>{
                            message.error(msg);
                        })
                    }}>
                        <Button type='text' danger icon={<DeleteOutlined />}>删除</Button>

                    </Popconfirm>
                   
                </div>
            )
        }
    ];
    const handleSearch = useCallback((values)=>{
        onDispatch({ type:'permission/setOptional', payload:values });
        onDispatch({ type:'permission/fetchUserList' });
    },[])
    return (
        <div style={{ width:'80%', height:'100%' }}>
            <div style={{ height:'40px' }}>
                <Button type='primary' icon={<PlusOutlined />} onClick={()=>setInfo({ visible:true })}>新建用户</Button>             
            </div>
            <div style={{ height:'14%', paddingBottom:'1rem' }}>
                <UserSelector 
                    onSearch={handleSearch}
                />
            </div>       
            <div className={style['card-container']} style={{ height:'calc(86% - 40px)', boxShadow:'none' }}>
                <Table
                    className={style['self-table-container']}
                    columns={columns}
                    dataSource={userList}
                    rowKey="employeeId"
                    locale={{
                        emptyText: <div style={{ margin: '1rem 0' }}>还没有添加用户</div>,
                    }}
                    pagination={{
                        current: currentPage,
                        total,
                        pageSize: 12,
                        showSizeChanger: false,
                    }}
                    onChange={(pagination) => {
                    }}
                />
            </div>
            <Drawer
                width="46%"
                open={info.visible ? true : false}
                className={style['custom-drawer']}
                onClose={() => setInfo({})}
                title={info.forEdit ? '更新用户' : '添加用户'}
            >
                <AddUserDrawer 
                    info={info}
                    onClose={()=>setInfo({})}
                    roleList={roleList}
                    onDispatch={onDispatch}
                />
            </Drawer>
        </div>
    )
}

export default UserTableContainer;